<template>
	<div class="app-actionbar">
		<div class="app-actionbar-item" v-for="(item, index) in items" :key="index">
			<a-button
				v-show="item.visible"
				:disabled="item.disabled"
				@click="handleActionClick(item, $event)"
			>
				<i
					v-if="item.iconClass"
					style="margin-right: 5px"
					:class="item.iconClass"
				></i>
				{{ item.caption }}
			</a-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { actionBarProps } from './action-bar';
const props = defineProps(actionBarProps);
const emit = defineEmits(['component-action']);

const data = ref({});

const handleActionClick = (item: any, event: any) => {
	emit('component-action', {
		name: props.name,
		action: 'portletAction',
		data: {
			event,
			logic: {
				name: item.logic.name,
				actionTag: item.logic.actionTag,
				actionDECodeName: item.logic.actionDECodeName,
				predefinedType: item.logic.predefinedType,
			},
		},
	});
};
</script>
